<template>
	<view class="nav" :style="{'height':height+'rpx'}">
		<div class="nav-container">
		  <!-- 这里是状态栏 -->
		  <view class="status_bar"></view>
		  
		  <!-- 头部分 -->
		  <div class="header-section flex flex-ai-c">
		    <!-- 位置 -->
		    <div class="address" @click="goPages('/pages_common/pages_index/address/address')">
		      <text class="address-text">{{ city.substr(0, 2) }}</text>
		      <i-icon icon="iconshouye-xiala" size="26rpx" color="#333"></i-icon>
		      <!-- <image :src="icondown" class="icon-down"></image> -->
		    </div>
		    
		    <!-- 搜索框 -->
		    <div class="search" @click="goPages('/pages_common/pages_index/search/search')">
		      <!-- <image :src="iconSearch" class="icon-search"></image> -->
		      <i-icon icon="iconsousuo" class="icon-search" size="30rpx" color="#999"></i-icon>
		      <text class="placeholder">搜索品牌/车型/配件/店铺</text>
		    </div>
		    
		    <!-- 扫一扫 -->
		    <div class="scan" @click="goScan()">
		      <i-icon icon="iconshouye-saoma" size="52rpx" color="#333"></i-icon>
		      <!-- <image :src="iconSaoyisao" class="saoyisao"></image> -->
		    </div>
		  </div>
		</div>
	</view>
	
</template>

<script>
	export default {
    data() {
      return {
				height:0,
        statusBarHeight: 0,
        // icondown: '',
        // iconSearch: '',
        // iconSaoyisao: ''
      }
    },
    
    computed: {
      city() {
        let city = this.$store.state.city
        if (city) {
          return city
        } else {
          let c = uni.getStorageSync('city')
          return c
        }
      }
    },
    
    created() {
      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
      // this.height = (this.statusBarHeight + 52) * 2
      // let height = this.statusBarHeight + 52
    },
    
    methods: {
			getHeight(cb){
        // cb(this.height)
				const query = uni.createSelectorQuery().in(this);
				query.select('.nav-container').boundingClientRect(data => {
					let height = data.height
          this.height = Math.floor(height / (uni.upx2px(height) / height)) - 2
				  console.log("得到布局位置信息: ", this.height);
					cb(this.height)
				}).exec()
			},
      goPages(url) {
        uni.navigateTo({
          url,
        })
      },

      // 跳转到扫码相机
      goScan() {
        // #ifdef APP-PLUS
        uni.navigateTo({
          url: '/pages_common/pages_index/scan/scan',
        })
        // #endif
      },
    }
	}
</script>

<style>
	/* // 状态栏占位 */
	.status_bar {
	  height: var(--status-bar-height);
	  width: 100%;
	  background-color: #fbd220;
	  position: relative;
	  z-index: 99;
	}
	.nav{
		background-color: #FBD220;
	}
  .nav-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    /* padding: 20rpx 0; */
    background-color: #FBD220;
  }
  
/* // 头部分 */
.header-section {
  width: 750rpx;
  height: 104rpx;
  flex-direction: row;
  align-items: center;
  /* background-color: #FBD220; */
}

/* // 搜索 */
.search {
  flex: 1;
  flex-direction: row;
  align-items: center;
  height: 60rpx;
  line-height: 60rpx;
  background-color: #fff;
  border-radius: 30rpx;
  font-size: 30rpx;
}
.icon-search {
  width: 30rpx;
  height: 30rpx;
  margin: 0 20rpx 0 30rpx;
  vertical-align: middle;
}

.placeholder {
  font-size: 24rpx;
  color: #999999;
}

/* // 扫一扫 */
.scan {
  margin: 0 25rpx;
}
.saoyisao {
  width: 52rpx;
  height: 46rpx;
}

.iconshouye-saoma {
  font-size: 50rpx;
  font-weight: 500;
}

/* // 位置 */
.address {
  flex-direction: row;
  align-items: center;
  padding: 0 16rpx 0 25rpx;
  text-align: center;
  font-size: 34rpx;
  font-weight: bold;
  color: #333333;
}
/* 定位下拉图标 */
.iconshouye-xiala {
  transform: scale(0.5);
}

.icon-down {
  width: 22rpx;
  height: 22rpx;
  margin-left: 10rpx;
}

.address-text {
  font-size: 30rpx;
}

.address-icon-down {
  margin-left: 4rpx;
  font-size: 26rpx;
}
</style>
